<!--
  商品入库登记: 需要起一个表 √,列举准备入库的信息 然后由审核员批准通过添加库存
-->
<script>
export default {
  name: "GoodsLogin",

  data() {
    return {
      userId: '',
      gouRuModel: false,
      tableData: [],
      allGoodsType_Login: [],
      goodsInfo: {
        writeUserId: 0,
        goodsId: 0,
        goodsName: '',
        buyCount: 0,
        oneMoney: 0,
        allMoney: 0,
      },
      rules: {
        name: [
          {required: true, message: '请输入商品名称', trigger: 'blur'},
          {min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur'}
        ],
        typeId: [
          {required: true, message: '请选择商品类型', trigger: 'blur'},
        ],
        money: [
          {required: true, message: '请输入商品价格', trigger: 'blur'},
          {validator: this.validateMoney, trigger: 'blur'}
        ]
      }

    };
  },
  methods: {
    // 自定义价格输入框的失焦判断
    validateMoney(rule, value, callback) {
      if (value === '') {
        callback(new Error('请输入商品价格'));
      } else if (isNaN(Number(value))) {
        callback(new Error('请输入有效的数字'));
      } else if (Number(value) < 0) {
        callback(new Error('请输入非负数'));
      } else {
        callback();
      }
    },

    // 查询所有商品类型
    findAllGoodsType() {
      this.$http.get("/goods/findAllType")
          .then((res) => {
            this.allGoodsType_Login = res.data;
          });
    },

    // 查询所有商品
    findAllGoods() {
      this.$http.get("/goods/findAllGoods")
          .then((res) => {
            console.info(res)
            res.data.forEach(item => {
              item.picture = "http://localhost:2001/picture/" + item.picture + ".jpg";
            });
            res.data.sort((a, b) => a.count - b.count);
            this.tableData = res.data;
          });
    },
    gouRu(row) {
      console.log("点击购入后的商品信息")
      console.info(row)
      this.goodsInfo.goodsId = row.id
      this.goodsInfo.writeUserId = this.userId
      this.goodsInfo.goodsName = row.name

      this.gouRuModel = true
    },
    gouRuModelQueDing() {
      console.log("购物提交信息")
      console.info(this.goodsInfo)

      this.$http.post("/goods/addGoodsLoginInfo", this.goodsInfo)
          .then(res => {
            if (res.data.msg === 1) {
              this.$message.success("已向审核员发送")
              this.findAllGoods()
              this.goodsInfo = {}
            } else {
              this.$message.error("添加失败")
            }

          })


      // 获取购入的商品id 以及最后添加后的数量
      // const buyCount = Number(this.goodsInfo.buyCount) + Number(this.goodsInfo.count);
      // this.$http.post("/goods/updateCountOfGoodsById", {id: this.goodsInfo.id, buyCount: buyCount})
      //     .then(res => {
      //       if (res.data.msg === 1) {
      //         this.$message({
      //           type: 'success',
      //           message: `已成功购入${this.goodsInfo.buyCount}个${this.goodsInfo.name}`
      //         })
      //         this.findAllGoods()
      //       } else {
      //         this.$message.error("添加失败")
      //       }
      //
      //     })


      this.gouRuModel = false
    },
    piFaDanJia() {
      this.goodsInfo.allMoney = this.goodsInfo.buyCount * this.goodsInfo.oneMoney
    }

  },
  mounted() {
    let user_info = sessionStorage.getItem("session_user");
    if (user_info) this.userId = JSON.parse(user_info).id;
    this.findAllGoods();
    this.findAllGoodsType();
    console.log('GoodsLogin准备完成');
  },
}
</script>

<template>
  <div style="margin: 10px 0 0 10px">

    <el-dialog title="提示" :visible.sync="gouRuModel" width="40%">
      <!--     需要购买数量 进价 支出  -->
      <el-form :model="goodsInfo" label-width="100px" class="demo-ruleForm">

        <el-form-item label="商品名称">
          <el-input v-model="goodsInfo.goodsName" class="addFormWidth" disabled/>
        </el-form-item>

        <el-form-item label="批发单价">
          <el-input v-model="goodsInfo.oneMoney" class="addFormWidth" @change="piFaDanJia"/>
        </el-form-item>

        <el-form-item label="批发数量">
          <el-input-number v-model="goodsInfo.buyCount" class="addFormWidth" @change="piFaDanJia"/>
        </el-form-item>

        <el-form-item label="费用总计">
          <el-input v-model="goodsInfo.allMoney" class="addFormWidth" disabled/>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
          <el-button @click="gouRuModel = false">取 消</el-button>
          <el-button type="primary" @click="gouRuModelQueDing">确 定</el-button>
            </span>
    </el-dialog>

    <h2>库存较少的商品</h2>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="编号" prop="id" width="50"/>
      <el-table-column label="图片" width="150" align="center">
        <template #default="scope">
          <el-image style="width: 50px; height: 50px" :src="scope.row.picture" fit="cover"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="name" width="100"/>
      <el-table-column label="类型" prop="goodsType.name"/>
      <el-table-column label="库存">
        <template #default="scope">
          <div v-if="scope.row.count >= 0 && scope.row.count <=3" style="color: red">{{ scope.row.count }}</div>
          <div v-else>{{ scope.row.count }}</div>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="small" @click="gouRu(scope.row)">购入</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.addFormWidth {
  width: 300px;
}

.el-form {
  width: 500px;
  height: 800px;
}


.avatar, .avatar-uploader {
  width: 200px;
  height: 200px;
  display: block;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader :hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}

.demo-ruleForm {
  height: 300px;
}
</style>